<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setState</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    //1.点赞示例
    class Like extends React.Component{
        constructor(){
            super()
            this.state={
                isLiked:true
            }
            this.changeState=this.changeState.bind(this)
        }
        changeState(){
            this.setState({
                isLiked:!this.state.isLiked
            })
        }
        render(){
            return(
                <input type="button" onClick={this.changeState} value={this.state.isLiked?"点赞":"取消"}/>
            )
        }
    }



    //2.setState原理解析
    //setState（）方法为异步操作
    // class Like extends React.Component{
    //     constructor(){
    //         super()
    //         this.state={
    //             count:0
    //         }
    //         this.showState=this.showState.bind(this)
    //     }
    //     componentDidMount(){
    //         this.setState({count:this.state.count+1})
    //         this.setState({count:this.state.count+1})
    //         this.setState({count:this.state.count+1})
    //         console.log('setState后：',this.state.count) 
    //     }
    //     showState(){
    //         console.log('showState中的state后：',this.state.count)
    //     }
    //     render(){
    //         return(
    //             <input type="button" onClick={this.showState} value="显示state"/>
    //         )
    //     }
    // }


    //3.立即得到最新state
    // class Like extends React.Component{
    //     constructor(){
    //         super()
    //         this.state={
    //             count:0
    //         }
    //         this.showState=this.showState.bind(this)
    //     }
    //     componentDidMount(){
    //         this.setState(
    //             function(state){
    //                 console.log("第一次setState前："+state.count)
    //                 return {
    //                     count:state.count+1
    //                 }
    //             }
    //         );

    //         this.setState(
    //             function(state){
    //                 console.log("第二次setState前："+state.count)
    //                 return {
    //                     count:state.count+1
    //                 }
    //             }
    //         )

    //         this.setState(
    //             function(state){
    //                 console.log("第三次setState前："+state.count)
    //                 return {
    //                     count:state.count+1
    //                 }
    //             }
    //         )
    //     }

    //     showState(){
    //         console.log('showState中的state：',this.state.count)
    //     }
    //     render(){
    //         return(
    //             <input type="button" onClick={this.showState} value="显示state"/>
    //         )
    //     }
    // }

    ReactDOM.render(<Like/>,document.getElementById('root'))
    </script>
</body>
</html>